<template>
	<div class="organ-manage-container">
		<filterBar ref="filterBar" @on-search="refresh"></filterBar>
		<w-table
			ref="listTable"
			:tableColumn="tableColumn"
			:listData="tableData"
			:showColumnFilterBtn="false"
			@on-size-change="handleSizeChange"
			@on-current-change="handleCurrentChange"
			@on-table-row-dbclick="onTableRowDbclick"
		>
			<div slot="btn-tools-right" class="tools-right">
				<el-button type="danger" plain size='mini' @click="mutileDel">删除</el-button>
				<el-button type="success" plain size='mini' @click="unExamine">反审</el-button>
				<el-button type="primary" plain size='mini' @click="examine">审核</el-button>
				<el-button type="primary" size='mini' icon="el-icon-plus" @click="onCreateClick">导入生产计划</el-button>
			</div>
		</w-table>
		<importProgram
			ref="importProgram"
			@on-refresh="refresh"
		></importProgram>
	</div>
</template>
<script>
import filterBar from './FilterBar.vue'
import FxListStateTag from '@/components/common/Fx-list-state-tag.vue'
import importProgram from '../create-container/ImportProgram.vue'
export default {
	name: 'listContainer',
	props: {
		getCurrentNode: Function
	},
	components: {
		filterBar,
		importProgram
	},
	data () {
		return {
			tableColumn: [
				{ prop: 'code', label: '工序任务单号', required: true },
				{ prop: 'productionPlanDate', label: '生产任务单日期', required: true, width: '160px' },
				{ prop: 'productionCode', label: '生产计划单号', required: true },
				{
					prop: 'state',
					label: '生产状态',
					required: true,
					fxRender: this.stateRender
				},
				{
					prop: 'busState',
					label: '单据状态',
					required: true,
					fxRender: this.busStateRender
				},
				{	prop: 'remark', label: '备注', required: true, showOverflowTooltip: true },
				{
					prop: 'modifyDate', label: '修改时间', required: true, width: '160px'
				},
				{
					prop: 'modifyUserName', label: '修改人', required: true
				},
				{
					prop: 'createDate', label: '制单时间', required: true, width: '160px'
				},
				{
					prop: 'createUserName', label: '制单人', required: true
				}
			],
			tableData: []
		}
	},
	computed: {
		billState (val, key) {
			return (val, key) => {
				return this.$fxStateMiddleware.getStateObj('billState')(val)[key]
			}
		},
		state () {
			return (val, key) => {
				return this.$fxStateMiddleware.getStateObj('state')(val)[key]
			}
		}
	},
	methods: {
		refresh () {
			this.$refs.listTable.setPaginationCurrent(1)
			this.$refs.listTable.clearSelected()
			// this.getFactoryListSelect()
			return this.productionPlanQuery()
		},
		handleSizeChange (val) {
			this.getListData()
		},
		handleCurrentChange (val) {
			this.getListData()
		},
		getSearchParams () {
			const params = {
				...this.$refs.filterBar.getFilterParams()
			}
			return {
				...this.$refs.listTable.getPaginationParams(),
				params: {
					...params
				}
			}
		},
		productionPlanQuery (searchParams) {
			return this.$fxApi('schedule.processTaskQuery')({ data: this.getSearchParams() }).then(res => {
				this.$refs.listTable.setPaginationTotal(res.total)
				this.tableData = res.data
				return Promise.resolve(res.data)
			})
		},
		onCreateClick () {
			this.$refs.importProgram.open()
		},
		// 批量删除
		mutileDel () {
			const _selData = this.$refs.listTable.selectedRowArr
			return this.$fxCommon.orderListFrontFunc('deleteMulity', _selData)
				.then(this.deleteMaterial)
				.then(this.refresh)
		},
		deleteMaterial () {
			const _selData = this.$refs.listTable.selectedRowArr
			const ids = []
			_selData.forEach((v) => {
				ids.push(v.id)
			})
			return new Promise(resolve => {
				this.$fxApi('schedule.procedureTaskBatchDelete')({
					data: {
						ids: ids
					}
				}).then(res => {
					resolve(res)
				})
			})
		},
		// 反审
		unExamine () {
			this.$refs.listTable.getSelectedRows().then(res => {
				this.$fxConfirm('是否确定反审所选任务单？').then(() => {
					this.onCheckHandler(res, 0)
				})
			})
		},
		// 审核
		examine () {
			this.$refs.listTable.getSelectedRows().then(res => {
				this.$fxConfirm('是否确定审核所选计划？').then(() => {
					this.onCheckHandler(res, 1)
				})
			})
		},
		onCheckHandler (selectRows, opertion) {
			const params = selectRows.map(item => {
				return item.id
			})
			return this.$fxApi('schedule.procedureTaskBatchAudit')({
				data: {
					ids: params,
					opertion: opertion
				}
			}).then(res => {
				this.$emit('on-refresh')
				return Promise.resolve()
			})
		},
		busStateRender (h, { row }) {
			return <FxListStateTag
				icon={this.billState(row.busState, 'icon')}
				label={this.billState(row.busState, 'label')}
			></FxListStateTag>
		},
		stateRender (h, { row }) {
			return <FxListStateTag
				icon={this.state(row.state, 'icon')}
				label={this.state(row.state, 'label')}
			></FxListStateTag>
		},
		processingPercentRender (h, { row }) {
			return <el-progress percentage={row.processingPercent || 0}
			></el-progress>
		},
		onTableRowDbclick (item) {
			return Promise.all([this.getProdureTask(item.id)]).then(([plan]) => {
				const procedureTaskDetailDTOs = JSON.parse(JSON.stringify(plan.procedureTaskDetailDTOs))
				this.$emit('on-edit', plan, procedureTaskDetailDTOs || [])
				return Promise.resolve()
			})
		},
		getProdureTask (planId) {
			return this.$fxApi('schedule.findProdureTask')({
				query: {
					id: planId
				}
			}).then(res => {
				return Promise.resolve(res)
			})
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
.organ-manage-container {
	flex: 1;
	display:flex
	flex-direction: column
	overflow: auto
	.tools-left, .tools-right {
		display:flex
		flex-direction: row
		align-items: center
	}
	.tools-left {
		flex: 1
	}
}
</style>
